<template>
  <div class="songList-table">
    <el-dialog
      title="歌单管理"
      :visible.sync="songUpdateDialogVisible"
       width="50%" :center="true">
      <el-transfer
        target-order="unshift"
        @change="transferChange"
        :titles="['未选歌曲', '已选歌曲']"
        :data="currentPageDataList"
        v-model="currentDataList"
        :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"
      >
        <el-pagination
          small
          slot="left-footer"
          align="right"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="totalPage"
          :pager-count="5"
          layout="prev, pager, next"
        ></el-pagination>
      </el-transfer>
      <span slot="footer">
        <el-button size="mini" type="warning" @click="songUpdateDialogVisible=false">取消</el-button>
        <el-button size="mini"  type="primary" @click="songListUpdate">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'song-update',
  components: {
  },
  data () {
    return {
      songUpdateDialogVisible: false,
      currentPageDataList: [],
      currentDataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchParams: '',
      currentSongListId: ''
    }
  },
  methods: {
    init (id) {
      console.log(id)
      this.currentSongListId = id
      this.songUpdateDialogVisible = true
      this.$nextTick(() => {
        if (this.currentSongListId) {
          this.getSongNotInSongList(this.currentSongListId)
          this.getSongInSongList(this.currentSongListId)
        }
      })
    },
    // 穿梭change
    transferChange (current, direction, move) {
      console.log('transferChange')
      console.log(current, 'current')
      let that = this
      // 为了保证数据的一致性，目标数组还回来之后要插进当前数据变量
      if (direction === 'left') {
        // that.currentDataList = that.sourceDataList.filter(
        //   function (val) {
        //     return current.includes(val.key)
        //   }
        // )
      }
      console.log(that.currentDataList, 'currentDataList')
      console.log(that.currentPageDataList, 'currentPageDataList')
      console.log(that.songUpdateDialogVisible)
    },
    // 分页change
    handleCurrentChange (val) {
      // 先将选中的从当前数据过滤掉
      // 这里写重新分页的回调
      console.log('handleCurrentChange')
    },
    songListUpdate () {
      console.log('songListUpdate')
      this.saveBatchSongListRelation()
      this.songUpdateDialogVisible = false
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getSongByPage()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getSongByPage()
    },
    saveBatchSongListRelation () {
      let that = this
      let dataList = that.currentPageDataList.filter(
        function (val) {
          return that.currentDataList.includes(val.key)
        })
      dataList = dataList.map((value, index) => {
        return {
          songId: value.obj.id,
          songListId: that.currentSongListId
        }
      })
      console.log(9999)
      that.$api.saveBatchSongListRelation(dataList).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getSongNotInSongList (singListId) {
      let that = this
      that.currentPageDataList = []
      let request = {
        params: {
          page: that.pageIndex,
          limit: that.pageSize,
          songListId: singListId
        }
      }
      console.log(88888)
      that.$api.getSongNotInSongList(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.currentPageDataList = res.data.data.list.map((value, index) => {
            return {
              label: value.name,
              key: value.id,
              obj: value
            }
          })
          // debugger
          console.log(that.currentPageDataList, 111)
          that.totalPage = res.data.data.totalCount
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getSongInSongList (singListId) {
      let that = this
      that.currentPageDataList = []
      let request = {
        params: {
          songListId: singListId
        }
      }
      console.log(768786)
      that.$api.getSongInSongList(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.currentDataList = res.data.data.map((value, index) => {
            return {
              label: value.name,
              key: value.id,
              obj: value
            }
          })
          debugger
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .songList-table{
    margin: auto;
    width: 80%;
  }

  body .el-table th.gutter{
    display: table-cell!important;
  }

</style>
